<template>
<div>
    <el-button class="add-btn" type="primary" @click="addDialogVisible = true" size="mini">添加参数</el-button>
    <el-table
            ref="singleTable"
            :data="paramData"
            stripe
            border
            @current-change="handleCurrentChange"
            style="width: 100%">
        <el-table-column
                align="center"
                type="index"
                label="#"
                width="50">
        </el-table-column>

        <el-table-column
                align="center"
                property="name"
                label="参数名"
                min-width="100">
        </el-table-column>

        <el-table-column
                align="center"
                property="numberic"
                label="是否是数字类型"
                min-width="90">
            <template slot-scope="scope">
                <p v-if="scope.row.numberic===false"><el-tag type="warning">否</el-tag></p>
                <p v-if="scope.row.numberic===true"><el-tag type="success">是</el-tag></p>
            </template>
        </el-table-column>

        <el-table-column
                align="center"
                property="unit"
                label="单位"
                min-width="60">
        </el-table-column>
        <el-table-column
                align="center"
                property="generic"
                label="是否是sku通用属性"
                min-width="110">
            <template slot-scope="scope">
                <p v-if="scope.row.generic===false"><el-tag type="warning">否</el-tag></p>
                <p v-if="scope.row.generic===true"><el-tag type="success">是</el-tag></p>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                property="searching"
                label="是否用于搜索过滤"
                min-width="110">
            <template slot-scope="scope">
                <p v-if="scope.row.searching===false"><el-tag type="warning">否</el-tag></p>
                <p v-if="scope.row.searching===true"><el-tag type="success">是</el-tag></p>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                property="segments"
                label="数值类型参数"
                min-width="100">
        </el-table-column>

        <el-table-column
                align="center"
                label="操作"
                min-width="220">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">编辑参数</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="deleteParam(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <!--添加对话框-->
    <el-dialog
            title="添加参数"
            :visible.sync="addDialogVisible"
            width="50%"
            @close="addDialogClosed"
            :close-on-click-modal=false>
        <!--内容主体区-->
        <el-form :model="addForm" label-width="120px" ref="addFormRef">
            <el-form-item label="*参数名称" prop="name">
                <el-input v-model="addForm.name"></el-input>
            </el-form-item>

            <el-form-item label="*是否为数值" prop="numberic">
                <el-radio v-model="addForm.numberic" :label=true>是</el-radio>
                <el-radio v-model="addForm.numberic" :label=false>否</el-radio>
            </el-form-item>

            <el-form-item label="单位" prop="unit">
                <el-input v-model="addForm.unit"></el-input>
            </el-form-item>

            <el-form-item label="*是否为sku通用" prop="generic">
                <el-radio v-model="addForm.generic" :label=true>是</el-radio>
                <el-radio v-model="addForm.generic" :label=false>否</el-radio>
            </el-form-item>

            <el-form-item label="*是否可搜索" prop="searching">
                <el-radio v-model="addForm.searching" :label=true>是</el-radio>
                <el-radio v-model="addForm.searching" :label=false>否</el-radio>
            </el-form-item>

            <el-form-item label="数值类型参数" prop="segments">
                <el-input v-model="addForm.segments"></el-input>
            </el-form-item>

        </el-form>
        <!--底部-->
        <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addParam">确 定</el-button>
  </span>
    </el-dialog>
    <!--编辑对话框-->
    <el-dialog
            title="编辑参数"
            :visible.sync="editDialogVisible"
            width="50%"
            @close="editDialogClosed"
            :close-on-click-modal=false>
        <!--内容主体区-->
        <el-form :model="editForm" label-width="120px" ref="addFormRef">
            <el-form-item label="*参数名称" prop="name">
                <el-input v-model="editForm.name"></el-input>
            </el-form-item>

            <el-form-item label="*是否为数值" prop="numberic">
                <el-radio v-model="editForm.numberic" :label=true>是</el-radio>
                <el-radio v-model="editForm.numberic" :label=false>否</el-radio>
            </el-form-item>

            <el-form-item label="单位" prop="unit">
                <el-input v-model="editForm.unit"></el-input>
            </el-form-item>

            <el-form-item label="*是否为sku通用" prop="generic">
                <el-radio v-model="editForm.generic" :label=true>是</el-radio>
                <el-radio v-model="editForm.generic" :label=false>否</el-radio>
            </el-form-item>

            <el-form-item label="*是否可搜索" prop="searching">
                <el-radio v-model="editForm.searching" :label=true>是</el-radio>
                <el-radio v-model="editForm.searching" :label=false>否</el-radio>
            </el-form-item>

            <el-form-item label="数值类型参数" prop="segments">
                <el-input v-model="editForm.segments"></el-input>
            </el-form-item>
        </el-form>
        <!--底部-->
        <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editParam">确 定</el-button>
  </span>
    </el-dialog>
</div>
</template>

<script>
    export default {
        name: "SpecParam",
        props:['groupId','cid','paramData'],
        data(){
            return{
                addDialogVisible:false,
                editDialogVisible:false,
                addForm:{
                    name:'',//参数名
                    numberic: false,//是否为数值
                    unit:'',//单位
                    generic: false,//是否通用
                    searching: false, //是否可搜索
                    segments:''
                },
                editForm:{}
            }
        },
        methods:{
            handleCurrentChange(){

            }  ,
            async handleEdit(row){
                this.editDialogVisible = true
                const res = await this.$http.get("/item/spec/getParamsById/"+row.id)
                if (res.data.code !== "200") {
                    return this.$message.error('获取失败！错误码:' + res.data.code)
                }
                this.editForm = res.data.data
            },
            handleParam(){

            },
            deleteParam(row){
                this.$confirm('此操作将永久删除参数, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http.get("/item/spec/delSpecParam/" + row.id)
                    if (res.data.code !== "200") {
                        return this.$message.error('删除失败！错误码:' + res.data.code)
                    }
                    this.$emit('getParamData');
                    this.$message.success('删除成功！')
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //发送添加请求
            async addParam(){
                let req = {
                    cid:this.cid,
                    groupId:this.groupId,
                    name:this.addForm.name,
                    numberic:this.addForm.numberic,
                    unit:this.addForm.unit,
                    generic:this.addForm.generic,
                    searching:this.addForm.searching,
                    segments:this.addForm.segments
                }
                const res = await this.$http.post("/item/spec/addOrEditSpecParam",req)
                if (res.data.code !== "200") {
                    return this.$message.error('新增失败')
                }
                //更新参数数据
                this.$emit('getParamData');
                this.addDialogVisible = false
            },
            //发送更新请求
            editParam(){

            },
            addDialogClosed(){
                this.$refs.addFormRef.resetFields()
                // this.addForm.name=''
            },
            editDialogClosed(){
                this.$refs.addFormRef.resetFields()
                // this.addForm.name=''
            }

        },
        created() {
        }
    }
</script>

<style scoped>
    .add-btn{
        float: right;
        margin-right: 40px;
        margin-bottom: 15px;
    }
</style>
